<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="/after/css/bootstrap.min.css">
    <link rel="stylesheet" href="/after/css/laypage.css">
    <script type="text/javascript" src="/after/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="/after/js/laypage/laypage.js"></script>
    <script type="text/javascript" src="/after/js/layer/layer.js"></script>
    <script type="text/javascript" src="/after/js/vue/vue.min.js"></script>
    <script src="/after/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/after/jquery.validation/1.14.0/messages_zh.min.js"></script>

    <script src="/after/laydate/laydate.js"></script>
    <script src="/after/css/laydate.css"></script>
</head>
<style>
    input.error {
        border: 1px solid red;
    }
</style>
<body>

<div class="container">
    <form id="addUserForm" method="post" action="/active/addActive.do" enctype="multipart/form-data">
        <br/>
        <div class="form-group">
            <label for="name">活动名称：</label>
            <input type="text" class="form-control" id="name" name="name" placeholder="输入活动名称">
        </div>
        <div class="form-group">
            <label for="content">活动内容：</label>
            <input type="text" class="form-control" id="content" name="content" placeholder="输入活动内容">
        </div>
        <div class="form-group">
            <label for="file">活动图片：</label>
            <input type="file"  id="file" name="file">
        </div>
        <div class="form-group">
            <label for="createTime">活动开始时间：</label>
            <input type="text" class="form-control" id="createTime" name="createTime" placeholder="输入活动开始时间(1990-01-01 00:00:00)">
        </div>
        <div class="form-group">
            <label for="endTime">活动结束时间：</label>
            <input type="text" class="form-control" id="endTime" name="endTime" placeholder="输入活动结束时间(1990-01-01 00:00:00)">
        </div>
        <div class="form-group">
            <label for="discount">折扣：</label>
            <input type="text" class="form-control" id="discount" name="discount" placeholder="输入折扣(小于1)">
        </div>
        <div id="app">
            <div class="form-group">
                <label for="type">针对类型：</label>
                <select id="type" name="bid">
                    <option v-for="b in btype" v-bind:value="b.id">{{b.type}}</option>
                </select>
             </div>
        </div>
        <div class="form-group">
            <button type="button" id="saveBtn" onclick="save()" class="btn btn-success">提交</button>
            <button type="button" id="cancelBtn" onclick="calcelBtn()" class="btn btn-default">取消</button>
        </div>
    </form>
</div>

</body>
</html>

<script>
    //日期控件
    lay('#version').html('-v' + laydate.v);

    //执行一个laydate实例
    laydate.render({
        elem: '#createTime'
        , type: 'datetime'
    });



    lay('#version').html('-v' + laydate.v);

    //执行一个laydate实例
    laydate.render({
        elem: '#endTime'
        , type: 'datetime'
    });


    var app = new Vue({
        el:'#app',
        data:{
            btype:[]
        }
    })

    var findBtype=function () {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: '/active/findBtype.do',
            data: {
            },
            success: function (msg) {
                app.btype = msg.btype;
            }
        });
    }
    findBtype();

    var addActive = function() {
        //检验form表单是否为空 ，调用check()方法
        if (!check().form()) {
            return false;
        }else{
            //检验时间大小
            var createTime=($("#createTime").val());
            var endTime=($("#endTime").val());

            var d1 = new Date(createTime.replace(/\-/g, "\/"));
            var d2 = new Date(endTime.replace(/\-/g, "\/"));
            if(d2-d1<=0) {
                layer.msg("活动开始时间不能大于或等于结束时间");
                return false;
            }

            //检验折扣大小
            var role=/^0\.\d*[1-9]\d*$/;
            var num=$("#discount").val();
            if(!role.test(num)){
                layer.msg("折扣不能大于1且不能小于0");
                return false;
            }
            return true;
        }
    }


    function calcelBtn(){
        console.log("关闭");
        var index = parent.layer.getFrameIndex(window.name);
        parent.getActivePageList();
        parent.layer.close(index);
    }

    function save(){

        if(addActive()){
            $("#addUserForm").submit();
            calcelBtn();
        }
    }




    //校验数据是否为空
    function check(){
        return $("#addUserForm").validate({
            rules:{
                name:{
                    required: true
                },
                content:{
                    required: true
                },
                file:{
                    required: true
                },
                createTime:{
                    required: true
                },
                endTime:{
                    required: true
                },
                discount:{
                    required: true
                }
            },
            messages:{
                name:{
                    required: ""
                },
                content:{
                    required: ""
                },
                file:{
                    required: ""
                },
                createTime:{
                    required: ""
                },
                endTime:{
                    required: ""
                },
                discount:{
                    required: ""
                }
            }
        })
    }

</script>